<style lang="less" scoped>
.register_2 {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  .content {
    position: absolute;
    top: 304px;

    .user-info-bg {
      width: 600px;
      height: 96px;
      border-radius: 8px;
      background-color: rgba(241, 241, 241, 1);
      display: flex;
      align-items: center;
      padding-left: 40px;
    }
    .user-info {
      .user-info-bg;
    }

    .form-input {
      width: 462px;
      border-radius: 16px;
      background-color: rgba(241, 241, 241, 1);
      font-size: 28px;
      border: none;
      margin-bottom: 0;
      line-height: normal;
      padding: 0 0 0 42px;
    }

    .marginBottom60 {
      margin-bottom: 60px;
    }
    .user-info-pwd-message {
      .user-info-bg;
      .form-input {
        width: 428px;
      }
      .get-validate-code {
        width: 74px;
        height: 44px;
        line-height: 44px;
        border-radius: 4px;
        background-color: rgba(81, 104, 255, 1);
        color: rgba(255, 255, 255, 1);
        font-size: 22px;
        margin: 0;
        padding: 0;
        text-align: center;
        vertical-align: text-bottom !important;
      }
    }

    input::-webkit-input-placeholder {
      color: #aab2bd;
    }

    .login-btn,
    .submit-btn,
    .enter-btn {
      margin-top: 64px;
      width: 600px;
      height: 96px;
      border-radius: 16px;
      background-color: #536dfe;
      box-shadow: 0px 5px 12px 0px rgba(83, 109, 254, 0.44);
      line-height: 66px;
      color: rgba(255, 255, 255, 1);
      font-size: 36px;
    }
    .submit-btn {
      margin-top: 88px;
    }

    .enter-btn {
      margin-top: 120px;
    }

    .login-link {
      margin-top: 64px;
      height: 44px;
      line-height: 44px;
      color: rgba(83, 109, 254, 1);
      font-size: 32px;
      text-align: justify;
      display: flex;
      justify-content: center;
      width: 100%;
    }
  }
}

.jeicon {
  color: #cfcfcf;
  font-size: 30px;
}

.phone-desc {
  margin-top: 8px;
  font-size: 18px;
  margin-left: 40px;
  color: rgba(61, 60, 60, 1);
  margin-bottom: 21px;
}

.loading-bar54 {
  margin-bottom: 54px !important;
}

.loading-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  margin-bottom: 106px;
  img {
    width: 50px;
    height: 50px;
  }

  .ing-bar {
    width: 100px;
    height: 3px;
    background: rgba(216, 216, 216, 1);
    border-radius: 3px;
    .color-bar {
      width: 70px;
      height: 3px;
      background: rgba(83, 109, 254, 1);
      border-radius: 3px 0px 0px 3px;
    }
  }

  .loaded-bar {
    width: 100px;
    height: 3px;
    background: rgba(216, 216, 216, 1);
    border-radius: 3px;
  }
  .ed-bar {
    width: 100px;
    height: 3px;
    background: rgba(83, 109, 254, 1);
    border-radius: 3px;
  }
}

.area_roll_mask {
  mask: -webkit-linear-gradient(
    bottom,
    #debb47 40%,
    rgba(36, 142, 36, 0)
  ) !important;
}

.area_roll {
  mask: -webkit-linear-gradient(
    top,
    #debb47 40%,
    rgba(36, 142, 36, 0)
  ) !important;
}

.jeicon-envelope-o {
  font-size: 25px !important;
}

.page-container {
  height: 100%;
  overflow: hidden;
  background: url("../../assets/register-bg.png") no-repeat top center;
  background-size: 100% 276px;
  height: 100%;
  position: relative;
  overflow: hidden;
  background-color: #fff;
}
</style>

<template>
  <div class="page-container">
    <div class="register_2">
      <div class="content">
        <div
          :class="[showIndex=='3'?'loading-bar54':'']"
          class="loading-bar"
        >
          <div>
            <img src="../../assets/1.png">
          </div>
          <div>
            <div
              v-show="showIndex=='1'"
              class="ing-bar"
            >
              <div class="color-bar" />
            </div>
            <div
              v-show="showIndex!='1'"
              class="ed-bar"
            />
          </div>
          <div>
            <img
              v-show="showIndex!='1'"
              src="../../assets/2.png"
            >
            <img
              v-show="showIndex=='1'"
              src="../../assets/2-disable.png"
            >
          </div>
          <div>
            <div
              v-show="showIndex=='1'"
              class="loaded-bar"
            />

            <div
              v-show="showIndex=='2'"
              class="ing-bar"
            >
              <div class="color-bar" />
            </div>
            <div
              v-show="showIndex=='3'"
              class="ed-bar"
            />
          </div>
          <div>
            <img
              v-show="showIndex=='3'"
              src="../../assets/3.png"
            >
            <img
              v-show="showIndex!='3'"
              src="../../assets/3-disable.png"
            >
          </div>
        </div>
        <div class="user-info marginBottom60">
          <i class="jeicon jeicon-enterprise " />
          <input
            v-model="loginInfo.enterpriseName"
            type="text"
            placeholder="企业名称"
            class="form-input"
            maxlength="20"
            @tap="close"
          >
        </div>
        <div class="user-info-pwd-message marginBottom60">
          <i class="jeicon jeicon-user-o " />
          <input
            v-model="loginInfo.name"
            type="text"
            placeholder="真实姓名"
            class="form-input"
            maxlength="10"
            @tap="close"
          >
        </div>
        <div class="user-info marginBottom60">
          <i class="jeicon jeicon-envelope-o" />
          <input
            v-model="loginInfo.email"
            type="text"
            placeholder="邮箱"
            class="form-input"
            maxlength="40"
            @tap="close"
          >
        </div>
        <div class="user-info ">
          <i class="jeicon jeicon-industry " />
          <input
            v-model="loginInfo.industry"
            type="text"
            placeholder="行业"
            class="form-input"
            readonly
            @tap="show=!show"
          >
        </div>
        <button
          class="login-btn submit-btn"
          @tap="submit"
        >
          提交
        </button>
      </div>
      <vue-pickers
        :show="show"
        :columns="columns"
        :default-data="defaultData"
        :select-data="pickData"
        @cancel="close"
        @confirm="confirmFn"
      />
    </div>
  </div>
</template>

<script>
import vuePickers from 'vue-pickers';
import {
  fetchGetIndustry,
  fetchRegsiterAccount,
  fetchAppCreateUser,
} from '../../actions/login';
import { validate, toastValidate } from '../../../../util/validate';
import { openWindow } from '@/helper';

export default {
  name: 'Register',
  components: {
    'vue-pickers': vuePickers,
  },
  data() {
    return {
      showPwd: true,
      showIndex: '2',
      loginInfo: {},
      show: false,
      columns: 1,
      defaultData: [],
      pickData: {
        data1: [],
      },
      params: {},
    };
  },
  async mounted() {
    const currentWeb = plus.webview.currentWebview();
    this.params = currentWeb;
    const industryRes = await fetchGetIndustry({ phone: 1 });
    if (industryRes.success) {
      this.pickData.data1 = industryRes.obj.map(item => ({ text: item.text, value: item.code }));
    }
  },
  methods: {
    async submit() {
      if (
        !toastValidate(
          '企业名称',
          validate.isNull(this.loginInfo.enterpriseName),
        )
        || !toastValidate('真实姓名', validate.isNull(this.loginInfo.name))
        || !toastValidate('邮箱', validate.isNull(this.loginInfo.email))
        || !toastValidate(
          '',
          validate.regEmail(this.loginInfo.email),
          '邮箱格式不正确',
        )
        || !toastValidate(
          '行业',
          validate.isNull(this.loginInfo.industry),
          '请选择',
        )
      ) {
        return false;
      }

      let joinCompanyRes;
      let routeParams = {};

      const params = {
        email: this.params.phone,
        companyname: this.loginInfo.enterpriseName,
        companyemail: this.loginInfo.email,
        username: this.loginInfo.name,
        tradeName: this.loginInfo.industry,
        tradeCode: this.loginInfo.tradeCode,
        password: this.params.pwd,
        username_zh: this.params.phone,
        phone: this.params.phone,
      };
      if (this.params.type === 'SUANBAN') {
        joinCompanyRes = await fetchRegsiterAccount(Object.assign(params, {
          type: 'PHONE',
          code: this.params.code,
        }));
      } else {
        joinCompanyRes = await fetchAppCreateUser(Object.assign(params, {
          type:
              this.params.type === 'WEIXIN'
                ? 'WX'
                : this.params.type,
          openId: this.params.openId,
          unionId: this.params.openId,
          access_token: this.params.accessToken,
        }));
      }
      if (joinCompanyRes.success) {
        if (this.params.type === 'SUANBAN') {
          routeParams = {
            name: joinCompanyRes.obj.username,
            enterpriseName: joinCompanyRes.obj.companyname,
            companyId: joinCompanyRes.obj.companyCode,
            userId: joinCompanyRes.obj.userCode,
            deptId: joinCompanyRes.obj.DEPTID,
            phone: this.params.phone,
            pwd: this.params.pwd,
          };
        } else {
          routeParams = {
            name: joinCompanyRes.obj.data.username,
            enterpriseName: joinCompanyRes.obj.data.companyname,
            companyId: joinCompanyRes.obj.data.companyCode,
            userId:
              joinCompanyRes.obj.data.userCode || this.params.phone,
            deptId: joinCompanyRes.obj.data.DEPTID,
            phone: this.params.phone,
            pwd: this.params.pwd,
          };
        }
        openWindow({
          url: './pages_register_3_index.html',
          id: '__register_3View',
          title: '免费注册',
          extras: routeParams,
        });
        /* this.$router.push({
          name: 'register_3',
          params: routeParams,
        }); */
      } else {
        mui.toast('注册失败');
      }
      return true;
    },
    close() {
      this.show = false;
    },
    confirmFn(val) {
      this.show = false;
      this.defaultData = [val.select1];
      this.loginInfo.industry = '互联网/IT';
      this.loginInfo.tradeCode = 'IT';
    },
    toShow() {
      this.show = true;
    },
  },
};
</script>
